.fcr-hx-btn {
  position: relative;
  cursor: pointer;
  font-size: 1rem /* 16px */;
  line-height: 1.5rem /* 24px */;
  border-radius: 9999px;
  overflow: hidden;
}

.fcr-hx-btn-primary {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(53, 123, 246, 1);
}

.fcr-hx-btn-primary:hover {
  background-color: rgba(99, 154, 250, 1);
}

.fcr-hx-btn-primary:active {
  background-color: rgba(38, 99, 208, 1);
}

.fcr-hx-btn-danger {
  color: rgba(222, 87, 83, 1);
  background-color: rgba(255, 255, 255, 1);
  border-color: rgba(222, 87, 83, 1);
  border-width: 1px;
}

.fcr-hx-btn-danger:hover {
  color: rgba(245, 111, 107, 1);
  border-color: rgba(245, 111, 107, 1);
}

.fcr-hx-btn-danger:active {
  color: rgba(192, 38, 33, 1);
  border-color: rgba(192, 38, 33, 1);
}

.fcr-hx-btn-secondary {
  color: rgba(53, 123, 246, 1);
  border-color: rgba(210, 210, 226, 1);
  background-color: rgba(255, 255, 255, 1);
  border-width: 1px;
}

.fcr-hx-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 1);
  border-width: 1px;
  color: rgba(99, 154, 250, 1);
  border-color: rgba(99, 154, 250, 1);
}

.fcr-hx-btn-secondary:active {
  background-color: rgba(255, 255, 255, 1);
  border-width: 1px;
  color: rgba(38, 99, 208, 1);
  border-color: rgba(38, 99, 208, 1);
}

.fcr-hx-btn-ghost {
  background-color: rgba(255, 255, 255, 1);
  border-width: 1px;
  color: rgba(103, 115, 134, 1);
  border-color: rgba(210, 210, 226, 1);
}

.fcr-hx-btn-ghost:hover {
  background-color: rgba(255, 255, 255, 1);
  border-width: 1px;
  color: rgba(99, 154, 250, 1);
  border-color: rgba(99, 154, 250, 1);
}

.fcr-hx-btn-ghost:active {
  background-color: rgba(255, 255, 255, 1);
  border-width: 1px;
  color: rgba(38, 99, 208, 1);
  border-color: rgba(38, 99, 208, 1);
}

.fcr-hx-btn-xs {
  width: 80px;
  height: 24px;
  font-size: 12px;
}

.fcr-hx-btn-sm {
  width: 80px;
  height: 30px;
  font-size: 14px;
}

.fcr-hx-btn-lg {
  width: 280px;
  height: 40px;
  font-size: 16px;
}

.fcr-hx-btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.fcr-hx-btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.fcr-hx-btn.fcr-hx-btn-xs[disabled],
.fcr-hx-btn.fcr-hx-btn-sm[disabled] {
  background-color: #ffffff;
  border: 1px solid #c2c2c8;
  color: #c2c2c8;
}

.fcr-hx-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@keyframes fcr-hx-ripple {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(250);
  }
}

.fcr-hx-btn .fcr-hx-ripple-circle {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 50%;
  pointer-events: none;
  animation: fcr-hx-ripple 0.75s 1;
  top: 50%;
  left: 50%;
}
